<template>
    <view
            class="dyGameHandShank"
            :style="[touchAreaStyleP]"
            @touchstart="touchstart"
            @touchmove="touchmove"
            @touchend="touchend"
    >
        <view
                class="coronaBox"
                :class="touchState&&'active'"
                :style="[coronaStyle]"
        >
            <view
                    class="joystickBox"
                    :style="[joystickStyle]"
            ></view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        // 通用配置
        options: {
            type: Object,
            default() {
                return {
                    direction: 8, //  1：上下， 2：左右， 4：4个方向， 8：8个方向，
                };
            }
        },
        // 触摸区域样式
        touchAreaStyle: {
            type: Object,
        },
        // 轮盘
        corona: {
            type: Object,
        },
        // 操纵杆
        joystick: {
            type: Object,
        },
    },
    computed: {
        // 计算轮盘样式
        coronaStyle() {
            let _self = this;
            return {
                width: (_self.coronaP.r * 2) + 'rpx',
                height: (_self.coronaP.r * 2) + 'rpx',
                left: (_self.coronaP.x) + 'rpx',
                top: (_self.coronaP.y) + 'rpx',
                background: _self.coronaP.background,
                opacity: (_self.touchState ? _self.optionsP.opacityActive : _self.optionsP.opacity),
            }
        },
        // 计算操作杆样式
        joystickStyle() {
            let _self = this;
            return {
                width: (_self.joystickP.r * 2) + 'rpx',
                height: (_self.joystickP.r * 2) + 'rpx',
                left: (_self.joystickP.x) + 'rpx',
                top: (_self.joystickP.y) + 'rpx',
                background: _self.joystickP.background,
            }
        },
    },
    data() {
        return {
            deviceWidth: null,
            touchState: false,
            optionsP: {
                direction: 8,
                opacity: .3,
                opacityActive: .5,
            },
            touchAreaStyleP: {
                width: '220rpx',
                height: '220rpx',
            },
            coronaP: { // 轮盘
                r: 150,
                x: 400,
                y: 300,
                background: 'rgba(0,159,225,.7)',
            },
            joystickP: { // 操纵杆
                r: 75,
                x: 0,
                y: 0,
                background: 'radial-gradient(circle at center, rgba(188,188,188,.9), rgba(255,255,255,.7))',
            },
        }
    },
    created() {
        let _self = this;
        Object.assign(_self.optionsP, _self.options);
        Object.assign(_self.touchAreaStyleP, _self.touchAreaStyle);
        Object.assign(_self.coronaP, _self.corona);
        Object.assign(_self.joystickP, _self.joystick);

        // 初始化坐标到中间
        _self.joystickP.x = _self.coronaP.r - _self.joystickP.r;
        _self.joystickP.y = _self.coronaP.r - _self.joystickP.r;
        _self.deviceWidth = uni.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
    },
    methods: {
        touchstart(e) {
            let _self = this;
            _self.touchState = true;
            _self.joystickMove(e);
        },
        touchmove(e) {
            let _self = this;
            if (_self.touchState) {
                _self.joystickMove(e);
            }
        },
        touchend(e) {
            let _self = this;
            _self.joystickP.x = _self.coronaP.r - _self.joystickP.r;
            _self.joystickP.y = _self.coronaP.r - _self.joystickP.r;
            _self.touchState = false;
            _self.handlersDatas();
        },
        // 移动操作杆
        joystickMove(e) {
            let _self = this;
            // 加上r半径的偏移到中心
            let xy = (_self.coronaP.r - _self.joystickP.r);
            let t = e.changedTouches[0];
            let pageX = (_self.rpxTopx(t.pageX - e.currentTarget.offsetLeft) + xy - _self.coronaP.x);
            let pageY = (_self.rpxTopx(t.pageY - e.currentTarget.offsetTop) + xy - _self.coronaP.y);
            // 开根 触摸点到摇杆中心点的距离
            let d = Math.sqrt(Math.pow(pageX - xy, 2) + Math.pow(pageY - xy, 2));
            d = d > xy ? xy : d;
            // 三角函数求反正切 减去xy偏移到中心点
            let radin = Math.atan2(pageY - xy, pageX - xy);

            if (_self.optionsP.direction === 2) { // 左右方向
                _self.joystickP.x = xy + Math.cos(radin) * d;
            } else if (_self.optionsP.direction === 1) { // 上下方向
                _self.joystickP.y = xy + Math.sin(radin) * d;
            } else {
                _self.joystickP.x = xy + Math.cos(radin) * d;
                _self.joystickP.y = xy + Math.sin(radin) * d;
            }

            _self.handlersDatas(xy);
        },
        // 返回给操作者
        handlersDatas(xy) {
            let _self = this;
            let obj = {
                angle: 0,
                speed: 0,
                x: (_self.joystickP.x - xy).toFixed(2) * 1,
                y: (_self.joystickP.y - xy).toFixed(2) * 1,
            }
            obj.angle = ((Math.atan2(obj.y, obj.x) * (180 / Math.PI) + 450) % 360).toFixed(1) * 1;
            obj.speed = (Math.sqrt(obj.x * obj.x + obj.y * obj.y) / xy).toFixed(2) * 1;

            // 根据轮盘角度计算具体的方向
            if (_self.optionsP.direction > 2) {
                let xx = 360 / _self.optionsP.direction;
                let xx1 = xx / 2;
                for (let i = 0; i < _self.optionsP.direction + 1; i++) {
                    if (obj.angle <= xx * i + xx1) {
                        obj.angle = xx * i % 360;
                        break;
                    }
                }
            }

            _self.$emit('change', obj);
            return obj;
        },
        rpxTopx(px) {
            let _self = this;
            let rpx = (750 / _self.deviceWidth) * Number(px)
            return Math.floor(rpx);
        },
    }
}
</script>

<style lang="scss" scoped>
.dyGameHandShank {
  width: 100%;
  height: 100%;
  position: relative;

  .coronaBox {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .joystickBox {
      border-radius: 100%;
      position: absolute;
      pointer-events: none;
      transition: all .015s ease-in;
    }
  }
}
</style>
